/*尽量少嵌套：避免性能问题和移植性问题*/
/*
 *使用Iconfont，字体文件代替图片文件展示图标
 *Iconfont的体积更小
 *Iconfont是矢量图，拉伸不变形，颜色可自行更换，支持CSS3对字体的修饰效果
 */
@font-face {
  font-family: 'icons-turn-arrow';
  src: url('../fonts/icons/turn-arrow.eot') format('enbedded'), url('../fonts/icons/turn-arrow.woff') format('woff'), url('../fonts/icons/turn-arrow.ttf') format('truetype'), url('../fonts/icons/turn-arrow.svg') format('svg');
}
/* 变量定义 */
/* Base Application Styles */
html,
body {
  width: 100%;
  height: 100%;
  background: #222;
}
.app {
  width: 100%;
  height: 100%;
}
/* stage -- start */
.stage {
  position: relative;
  width: 100%;
  height: 100%;
}
/* stage -- end */
/* image -- start */
.img-sec {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #ddd;
  /* 
   * 添加景深，增强3D效果。
   * 当为元素设置perspective，子元素会获得透视效果，而不是元素本身
   */
  perspective: 1800px;
}
.img-figure {
  position: absolute;
  width: 260px;
  height: 340px;
  margin: 0;
  padding: 30px;
  box-sizing: border-box;
  /* width包含padding\border */
  background-color: #fff;
  cursor: pointer;
  transform-origin: 0 50% 0;
  /* 被转换元素的位置 3D的分别对应: x轴，y轴，z轴，默认是：50% 50% 0 */
  transform-style: preserve-3d;
  /* 子元素将保留其3D位置 */
  transition: transform 0.6s ease-in-out, left 0.6s ease-in-out, top 0.6s ease-in-out;
  /* transform、left、top分别应用过渡效果，0.6秒完成，慢速开始和结束 */
  /* 图片翻转  -- start */
  /* 图片翻转  -- end */
}
.img-figure img {
  width: 100%;
  height: 240px;
}
.img-figure.is-inverse {
  transform: translate(260px) rotateY(180deg);
}
figcaption {
  text-align: center;
}
figcaption .img-title {
  margin: 20px 0 0 0;
  color: #a7a0a2;
  font-size: 16px;
}
figcaption .img-back {
  position: absolute;
  /* 相对于img-sec进行定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 50px 40px;
  overflow: auto;
  color: #666;
  background: #fff;
  transform: rotateY(180deg) translateZ(1px);
}
/* image -- end */
/* controller -- start */
.controller-nav {
  position: absolute;
  left: 0;
  bottom: 30px;
  z-index: 101;
  /* 11的二次方 */
  width: 100%;
  text-align: center;
  transition: background-color 6s;
}
.controller-unit {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 0 5px;
  background-color: #aaa;
  border-radius: 50%;
  cursor: pointer;
  transform: scale(0.5);
  transition: transform 0.6s ease-in-out, background-color 0.3s;
  /* 增加过渡效果 */
  vertical-align: middle;
}
.controller-unit.is-center {
  transform: scale(1);
  background-color: #888;
}
.controller-unit.is-center::after {
  font-family: 'icons-turn-arrow';
  /* 引用字体文件 */
  content: '\e600';
  /* 使用字体文件的Unicode码对字体进行引用 */
  font-size: 80%;
  line-height: 30px;
  /* 设置成和圆点一样的高度，使之垂直居中 */
  color: #fff;
  /*
      * 屏幕渲染机制：灰阶渲染（控制边缘亮度，所耗内存相对较低，应用于手机） 亚像素渲染（效果更好，所耗内存相对更高，应用于Mac等）
      * Mac上有些浅色字体图片（在上面设置了白色，可以设置为深色进行测试）在浏览器上显得较粗
      * 解决方案：修改浏览器的属性：
      */
  -webkit-font-smoothing: antialiased;
  /* 开启chrome在Mac下字体渲染的灰阶平滑 */
  -moz-osx-font-smoothing: grayscale;
  /* 开启firefox在Mac下字体渲染的灰阶平滑 */
}
.controller-unit.is-center.is-inverse {
  background-color: #555;
  transform: rotateY(180deg);
  /* 翻转180度 */
}
/* controller -- end */
